<template>
  <div class="app-container" v-if="$route.fullPath!='buttonList'">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="$route.query.name" name="first">
        <top-simple-search @addFun="addMenuButton"
        ></top-simple-search>
        <simple-table ref="myTable" apiUrl="menuManagement" apiFun="getMenuButton" :params="{menu:id}">
          <el-table-column align="left" prop="name" label="名称">
          </el-table-column>
          <el-table-column align="left" prop="method" label="请求方式" :formatter="methodFormatter">
          </el-table-column>
          <el-table-column align="left" prop="api" label="接口地址"/>
          <el-table-column align="left" fixed="right" label="操作" width="100">
            <template slot-scope="{ row }">
              <edit-button @click="editMenuButton(row,true)"></edit-button>
              <delete-button @click="deleteMenuButton(row.id)"></delete-button>
            </template>
          </el-table-column>
        </simple-table>
        <eidt-button-dialog :visible.sync="visible" v-if="visible" @reloadList="getMenuButtonList" :row="currRow"></eidt-button-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import EidtButtonDialog from "./dialog/editButtonDialog";
import menu from "@/api/menuManagement/index";
export default {
  name: "menuButton",
  components: {EidtButtonDialog },
  data() {
    return {
      visible: false,
      currRow: {},
      disabled:false,
      activeName:"first",
      id:this.$route.query.id
    };
  },
  created() {
    //console.log("$route.fullPath",this.$route.fullPath)
  },
  watch: {},
  methods: {
    addMenuButton(){
      this.visible = true
      this.currRow = {}
    },
    toButtonList(){
      this.$router.push({ path: `/buttons`});
    },
    methodFormatter(row){
      if(row.method == 0){
        return "GET"
      }else if(row.method == 1){
        return "POST"
      }else if(row.method == 2){
        return "PUT"
      }else if(row.method == 3){
        return "DELETE"
      }else{
        return ""
      }
    },
    query(queryData) {
      this.$refs["myTable"].searchList(queryData);
    },
    getMenuButtonList() {
      this.$refs["myTable"].searchList();
    },
    editMenuButton(row){
      this.visible = true
      this.currRow = row
    },
    deleteMenuButton(id) {
      this.$confirm("删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        menu.deleteMenuButton(id).then(res => {
            this.msgSuccess("删除成功!");
            this.getMenuButtonList();
        });
      });
    }
  }
};
</script>
